<!--------------------------------
 - @Author: Ronnie Zhang
 - @LastEditor: Ronnie Zhang
 - @LastEditTime: 2023/12/05 21:29:38
 - @Email: zclzone@outlook.com
 - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 --------------------------------->

<template>
  <CommonPage>
    <template #action>
      <n-button type="primary" @click="handleAdd()">
        <i class="i-material-symbols:add mr-4 text-18" />
        新增文章
      </n-button>
    </template>

    <MeCrud
      ref="$table"
      v-model:query-items="queryItems"
      :scroll-x="1200"
      :columns="columns"
      :get-data="api.read"
    >
      <MeQueryItem label="文章分类" :label-width="80">
        <n-select
          v-model:value="queryItems.type"
          clearable
          :options="typeList"
          label-field="name"
          value-field="id"
        />
      </MeQueryItem>
    </MeCrud>
    <MeModal ref="modalRef">
      <n-form
        ref="modalFormRef"
        label-placement="left"
        label-align="left"
        :label-width="80"
        :model="modalForm"
      >
        <n-form-item
          label="标题"
          path="title"
          :rule="{
            required: true,
            message: '请输入文章名',
            trigger: ['input', 'blur'],
          }"
        >
          <n-input v-model:value="modalForm.title" />
        </n-form-item>
        <n-form-item
          label="文章分类"
          path="type"
          :rule="{
            type: 'number',
            required: true,
            trigger: ['select'],
          }"
        >
          <n-select
            v-model:value="modalForm.type"
            clearable
            :options="typeList"
            label-field="name"
            value-field="id"
          />
        </n-form-item>
        <n-form-item
          label="课程内容"
          path="content"
          :rule="{
            required: true,
            message: '请输入课程内容',
            trigger: ['input', 'blur'],
          }"
        >
          <!-- <n-input v-model:value="value" type="textarea" placeholder="基本的 Textarea" /> -->
        </n-form-item>
        <editor
          :initHtml="modalForm.content"
          placeholder="请输入"
          @change="(content) => modalForm.content = content"
        />
      </n-form>
    </MeModal>
  </CommonPage>
</template>

<script setup>
import { NButton, NSwitch } from 'naive-ui'
import { MeCrud, MeQueryItem, MeModal } from '@/components'
import { useCrud } from '@/composables'
import api from './api'

import editor from '@/components/me/editor/Editor.vue'

defineOptions({ name: 'RoleMgt' })

const router = useRouter()

const $table = ref(null)
/** QueryBar筛选参数（可选） */
const queryItems = ref({})

const mockData = () => {
  // console.log('mockData')

  const obj = JSON.parse(`{
    "code": 0,
    "message": "OK",
    "data": {
        "pageData": [],
        "total": 2
    },
    "originUrl": "/role/page?pageNo=1&pageSize=10"
}`)
  obj['data']['pageData'] = [
    {
      id: 1,
      title: '第一节',
      content: '数据库指的是xxxxxxxxx',
      type: 2,
      typeName: '数据库',
      createTime: '2023-12-10 16:00:10'
    }
  ]
  return obj
}

const typeList = ref([
  {
    id: 1,
    name: 'Java'
  },
  {
    id: 2,
    name: '数据库'
  },
  {
    id: 3,
    name: 'HTML+CSS'
  }
])

onMounted(() => {
  $table.value?.handleSearch()
  api.getType().then(res => {
    typeList.value = res.data
  })
})

const columns = [
  { title: 'id', key: 'id', align: 'center', width: 80 },
  { title: '标题', key: 'title', align: 'center', width: 200 },
  { title: '文章内容', key: 'content', align: 'center', width: 500, 
    ellipsis: {
      tooltip: true
    } },
  { title: '文章分类', key: 'typeName', align: 'center', width: 200 },
  { title: '创建时间', key: 'createTime', align: 'center', width: 200 },
  {
    title: '操作',
    key: 'actions',
    width: 320,
    align: 'center',
    fixed: 'right',
    render(row) {
      return [
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            style: 'margin-left: 12px;',
            onClick: () => handleEdit(row)
          },
          {
            default: () => '编辑',
            icon: () => h('i', { class: 'i-material-symbols:edit-outline text-14' })
          }
        ),

        h(
          NButton,
          {
            size: 'small',
            type: 'error',
            style: 'margin-left: 12px;',
            onClick: () => handleDelete(row.id)
          },
          {
            default: () => '删除',
            icon: () => h('i', { class: 'i-material-symbols:delete-outline text-14' })
          }
        )
      ]
    }
  }
]

async function handleEnable(row) {
  row.enableLoading = true
  try {
    await api.update({ id: row.id, enable: !row.enable })
    row.enableLoading = false
    $message.success('操作成功')
    $table.value?.handleSearch()
  } catch (error) {
    row.enableLoading = false
  }
}

const { modalRef, modalFormRef, modalAction, modalForm, handleAdd, handleDelete, handleEdit } =
  useCrud({
    name: '文章',
    doCreate: api.create,
    doDelete: api.delete,
    doUpdate: api.update,
    initForm: { enable: true },
    refresh: () => $table.value?.handleSearch()
  })
</script>
